<template>
  <div class="link flex" style="overflow-x: auto">
    <table border="1" class="tabledata">
      <thead>
        <tr>
          <th>
            <div style="width:120px;">材料名称</div>
          </th>
          <th>
            <div style="width:100px">包装、规格</div>
          </th>
          <th>
            <div style="width:70px">储存形式</div>
          </th>
          <th>
            <div style="width:80px">库存上下限</div>
          </th>
          <th>
            <div style="width:70px">库存</div>
          </th>
          <th>
            <div style="width:70px">当日用量</div>
          </th>
          <th>
            <div style="width:70px">计量单位</div>
          </th>
          <th>
            <div style="width:70px">所属单位</div>
          </th>
          <th>
            <div style="width:100px">库存可用天数</div>
          </th>
          <th>
            <div style="width:280px">备注<span style="font-size: 12px;">（①库存超限原因；②当日用量超量原因）</span></div>
          </th>
          <th>
            <div style="width:150px">使用地点</div>
          </th>
          <th>
            <div style="width:210px">作用</div>
          </th>
          
        </tr>
      </thead>
      <tbody v-if="uu=='系统管理员'||uu=='中润管理员'||uu=='生产调度'">
        <tr v-for="(item,index) in inputs">
          <!-- 第一列个别行需要合并单元格 -->
          <td v-if="(index+1)==2" rowspan="3">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==6" rowspan="2">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==8" rowspan="3">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==11" rowspan="3">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==17" rowspan="2">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==19" rowspan="2">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==21" rowspan="2">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==23" rowspan="2">{{item.name?item.name:item.pname}}</td>
          <td v-if="(index+1)==43" rowspan="2">{{item.name?item.name:item.pname}}</td>
          <!-- 不需要合并的排除掉 -->
          <td v-if="(index+1)!=2&&(index+1)!=6&&(index+1)!=8&&(index+1)!=11&&(index+1)!=17&&(index+1)!=19&&(index+1)!=21&&(index+1)!=23&&(index+1)!=43&&item.name">{{item.name?item.name:item.pname}}</td>
          <!-- 第二列 个别行需要合并单元格 -->
          <td >{{item.percentage}}</td>
          <td>{{item.mode}}</td>
          <td>{{item.limit}}</td>
          <td>
            <input type="text" class="dinput" v-model="item['kc']" v-if="!date.isup">
            <span v-else>{{item['kc']}}</span>
          </td>
          <td>
            <input type="text" class="dinput" v-model="item['dryl']" v-if="!date.isup">
            <span v-else>{{item['dryl']}}</span>
          </td>
          <td>{{item.unit1}}</td>
          <td>{{item.company}}</td>
          <td>
            <input type="text" class="dinput" v-model="item['kckyts']" v-if="!date.isup">
            <span v-else>{{item['kckyts']}}</span>
          </td>
          <td>
            <textarea cols="32" rows="2" v-model="item['bz']" v-if="!date.isup"></textarea>
            <span v-else>{{item['bz']}}</span>
          </td>
          <td>{{item.place}}</td>
          <td><div style="text-align: left;">{{item.effect}}</div></td>
        </tr>
        
      </tbody>
      <tbody v-else  v-for="(item,index) in inputs">
          <tr v-if="item.company==uu">
          
          <!-- 第一列个别行需要合并单元格 -->
          <td>{{item.name?item.name:item.pname}}</td>
          <!-- 第二列 个别行需要合并单元格 -->
          <td>{{item.percentage}}</td>
          <td>{{item.mode}}</td>
          <td>{{item.limit}}</td>
          <td>
            <input type="text" class="dinput" v-model="item['kc']" v-if="!date.isup">
            <span v-else>{{item['kc']}}</span>
          </td>
          <td>
            <input type="text" class="dinput" v-model="item['dryl']" v-if="!date.isup">
            <span v-else>{{item['dryl']}}</span>
          </td>
          <td>{{item.unit1}}</td>
          <td>{{item.company}}</td>
          <td>
            <input type="text" class="dinput" v-model="item['kckyts']" v-if="!date.isup">
            <span v-else>{{item['kckyts']}}</span>
          </td>
          <td>
            <textarea cols="32" rows="2" v-model="item['bz']" v-if="!date.isup"></textarea>
            <span v-else>{{item['bz']}}</span>
          </td>
          <td>{{item.place}}</td>
          <td><div style="text-align: left;">{{item.effect}}</div></td>
          
        </tr>
        
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup name="kucun">
import cache from '@/utils/cache'
import { getStock,stockSave,stockSubmit } from '@/api/report'
import {tabledata,} from './data'

const uu = ref(cache.get('role_name'))
console.log(uu.value)

// 循环生成绑定数据  一共18行 
const arr = [];
for(let i=1;i<=47;i++){
  arr.push({
    name:tabledata[i-1].name,
    pname:tabledata[i-1].pname?tabledata[i-1].pname:'',
    percentage:tabledata[i-1].percentage,
    mode:tabledata[i-1].mode,
    limit:tabledata[i-1].limit,
    kc:'',
    dryl:'',
    unit1:tabledata[i-1].unit1,
    company:tabledata[i-1].company,
    kckyts:'',
    bz:'',
    place:tabledata[i-1].place,
    effect:tabledata[i-1].effect,
    'is':0,
  })
}
// 整表 数据绑定
const inputs = ref(arr)
// 父组件传参
const date = defineProps(['date','isup','ishistory'])
watch(date, async (n) => {
  getData()
})

onMounted(() => {
  getData()
})

const emit = defineEmits(['ischeck'])
// 获取数据
const getData = async () => {
  getStock({
    company:uu.value,
    ...date,
  }).then((res)=>{
    console.log(res)
    if(res.length>0){
      inputs.value = res
    }else{
      if(date.ishistory==1){
        emit('ischeck')
      }else{
        inputs.value = arr
      }
    }
    
    for(let i=0;i<inputs.value.length;i++){
      if(inputs.value[i].company==uu.value||uu.value=='生产调度'||uu.value=='中润管理员'||uu.value=='系统管理员'){
        inputs.value[i].is = 1
      }
    }
    
  })
}
const save = async () => {
  let userInfo = cache.get('userInfo')
  await stockSave({
    company:uu.value,
    inputs:inputs.value,
    aid: userInfo.id,
    aname: userInfo.name,
    date:date.date,
  })
}
// 提交方法，调用接口
const submit = async () => {
  await stockSubmit({
    company:uu.value,
    date:date.date,
  })
}
defineExpose({
  save,
  submit
})
</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  th {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
